<template>
  <view class="help-center">
    <header-vue :back="true" title="帮助中心"></header-vue>
    <view class="help-center-content">
      <view class="problem-list">
        <view class="problem-item" @tap="showDetail(1)">
          <text class="problem-text">订单发布后没人接</text>
          <i class="iconfont icon-jiantou font28"></i>
        </view>
        <view class="problem-item" @tap="showDetail(2)">
          <text class="problem-text">一直给我派的都是低价订单</text>
          <i class="iconfont icon-jiantou font28"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  data() {
    return {};
  },
  components: {
    headerVue,
  },
  methods: {
    showDetail(problemId) {
      uni.navigateTo({
        url: `/views-master/my/help-center-detail?problemId=${problemId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.help-center {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: #F6F6F6;

  .help-center-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding: 28rpx 32rpx;

    .problem-list {
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .problem-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 40rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }

    .problem-item:last-child {
      border-bottom: none;
    }

    .problem-item:active {
      background-color: #f9f9f9;
    }

    .problem-text {
      font-size: 28rpx;
      color: #333333;
    }

    .arrow {
      color: #999;
      font-size: 32rpx;
    }
  }
}
</style>
